<template>
	<view class="content">
		<div class="ttop">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType" styleType="text"
				active-color="#3254c3" @clickItem="onClickItem" />
		</div>
		<div class="container">
			<view :class="['ibox', current == 0 ? 'i1' : 'i2']" v-for="(i, idx) in list" :key="i.id" @click="toView(i)">
				<div class="flexB mb10">
					<div class="theme" style="width: 80%;" v-if="i.orderType!=2" >{{ i.stadiumName }}</div>
					<div class="theme" style="width: 80%;" v-if="i.orderType==2">{{ i.productName }}</div>
					<div :class="[i.status != 4 ? 'theme' : 'o']">
						{{ $utils.orderStatus.find(ii => ii.value == i.status).label }}
					</div>
				</div>
				<div class="flex ac">
					<image class="img" :src="base + i.img"></image>
					<div class="c80 flow">
						<div class="f12">订单号：{{ i.pickupNo }}</div>
						<span class="f12">{{ current == 0 ? '预定时间' : '下单时间' }}: {{ i.createTime }}</span>
						<div class="f12 flexB">
							<div>实付：<span class="theme f14">¥{{ i.realPay }}</span></div>
						</div>
					</div>
				</div>
				<div class="line" style="margin: 5px 0;"></div>
				<div style="margin-top: 4px;" class="flexB">
					<div></div>
					<div class="flex">
						<view class="bb" v-if="i.orderType!=2" @click.stop="delItem(i, idx)">
							删除订单
						</view>
						<view class="bb b2" @click.stop="again(i, idx)" v-if="current == 1">
							再来一单
						</view>
					</div>
				</div>
			</view>

			<view v-if="!list.length" class="kong">暂无数据</view>
			<div v-else>
				<view v-if="list.length < total" class="last">正在加载</view>
				<view v-else class="last">没有更多了</view>
			</div>
		</div>

	</view>
</template>

<script>
export default {
	data() {
		return {
			base: this.$base,
			page: 1,
			current: 0,
			total: 0,
			loading: false,
			items: ['场馆订单', '商品订单'],
			list: []
		}
	},
	onShow() {
		this.page = 1;
		this.list = [];
		this.getList();
	},
	/** 加载评论 */
	onReachBottom() {
		setTimeout(() => this.loadmore(), 1000)
	},
	methods: {
		loadmore() {
			if (this.list.length == this.total || this.loading) return;
			this.page += 1;
			this.getList();
		},
		again(i) {
			this.$request({
				url: '/order/anotherOrder/' + i.id,
				method: 'get',
			}).then(res => {
				uni.navigateTo({
					url: `/pages/car`
				});
			})
		},
		delItem(i, idx) {
			// e.stopPropagation(); // 阻止冒泡
			uni.showModal({
				title: '提示',
				content: '确定删除订单？',
				success: (res) => {
					if (res.confirm) {
						this.$request({
							url: '/order/delOrder/' + i.id,
							method: 'get',
						}).then(res => {
							this.$msg('操作成功');
							this.list.splice(idx, 1);
							this.total -= 1;
						})
					} else if (res.cancel) {
					}
				}
			});
		},
		toView(i) {
			uni.navigateTo({
				url: `/pages/orderDetail?no=${i.pickupNo}&type=${i.orderType}`
			});
		},
		onClickItem(e) {
			this.current = e.currentIndex;
			this.page = 1;
			this.list = [];
			this.getList();
		},
		getList() {
			this.loading = true;
			this.$request({
				url: '/orderList/orderList',
				data: {
					orderType: this.current + 1,
					pageNo: this.page,
					pageSize: 10
				}
			}).then(res => {
				this.loading = false;
				this.total = res.data.totalRow;
				this.list = this.list.concat(res.data.list);
			})
		},

	}
}
</script>

<style lang="scss">
.bb {
	padding: 6px 14px;
	border-radius: 14px;
	color: #fff;
	font-size: 24rpx;
	background: #808080;
}

.b2 {
	background: $theme;
	margin-left: 10px;
}

.o {
	color: orange;
}

//.i1 {
	// background: linear-gradient(180deg, #FFFFFF 0%, #EAF6FD 100%);
//}

//.i2 {
	// background: linear-gradient(180deg, #FFFFFF 0%, #E9EAF5 100%);
//}

.img {
	width: 120rpx;
	height: 120rpx;
	margin-right: 10px;
	border-radius: 10rpx;
	background: #8192e4;
}

.ttop {
	position: sticky;
	top: -1px;
	z-index: 99;
	background: #fff;
}
</style>